<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户中心</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: #f5f5f5;
            color: #333;
        }

        .container {
            display: flex;
            min-height: 100vh;
        }

        /* 左侧导航栏 */
        .sidebar {
            width: 200px;
            background-color: #2c3e50;
            color: white;
            padding: 20px 0;
        }

        .logo {
            text-align: center;
            padding: 10px 0 30px;
            font-size: 20px;
            font-weight: bold;
            border-bottom: 1px solid #34495e;
            margin-bottom: 30px;
        }

        .nav-menu {
            list-style: none;
        }

        .nav-item {
            padding: 12px 20px;
            cursor: pointer;
            transition: background-color 0.3s;
            display: flex;
            align-items: center;
        }

        .nav-item i {
            margin-right: 10px;
            font-size: 18px;
        }

        .nav-item:hover, .nav-item.active {
            background-color: #34495e;
        }

        /* 主内容区 */
        .main-content {
            flex: 1;
            padding: 20px;
            background-color: #f5f5f5;
        }

        /* 搜索栏 */
        .search-bar {
            background: white;
            border-radius: 8px;
            padding: 15px 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            display: flex;
        }

        .search-input {
            flex: 1;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            outline: none;
        }

        .search-btn {
            background: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 0 20px;
            margin-left: 10px;
            cursor: pointer;
        }

        /* 用户信息卡片 */
        .user-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            display: flex;
        }

        .user-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: #eee;
            margin-right: 20px;
            overflow: hidden;
        }

        .user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .user-info {
            flex: 1;
        }

        .user-name {
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 10px;
        }

        .user-stats {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }

        .stat-item {
            text-align: center;
            min-width: 60px;
        }

        .stat-value {
            font-size: 18px;
            font-weight: 500;
            color: #3498db;
        }

        .stat-label {
            font-size: 12px;
            color: #777;
        }

        /* 用户发表内容 */
        .content-section {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .section-title {
            font-size: 18px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .content-item {
            padding: 15px 0;
            border-bottom: 1px solid #eee;
        }

        .content-item:last-child {
            border-bottom: none;
        }

        .content-title {
            font-weight: 500;
            margin-bottom: 8px;
        }

        .content-meta {
            font-size: 12px;
            color: #777;
            margin-bottom: 8px;
            display: flex;
        }

        .content-meta span {
            margin-right: 15px;
        }

        .content-text {
            font-size: 14px;
            line-height: 1.6;
            color: #444;
        }

        /* 右侧日历 */
        .right-sidebar {
            width: 280px;
            padding: 20px;
            background-color: white;
            box-shadow: -2px 0 10px rgba(0,0,0,0.05);
        }

        .calendar {
            width: 100%;
        }

        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .calendar-title {
            font-size: 16px;
            font-weight: 500;
        }

        .calendar-nav {
            display: flex;
        }

        .calendar-nav button {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 16px;
            padding: 0 5px;
        }

        .calendar-weekdays {
            display: flex;
            margin-bottom: 10px;
        }

        .calendar-weekday {
            flex: 1;
            text-align: center;
            font-size: 12px;
            color: #777;
        }

        .calendar-days {
            display: flex;
            flex-wrap: wrap;
        }

        .calendar-day {
            width: 14.28%;
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            cursor: pointer;
            position: relative;
        }

        .calendar-day:hover {
            background-color: #f5f5f5;
        }

        .calendar-day.today {
            color: #3498db;
            font-weight: 500;
        }

        .calendar-day.selected {
            background-color: #3498db;
            color: white;
            border-radius: 50%;
        }

        .calendar-day.other-month {
            color: #ccc;
        }

        /* 图标字体 */
        @font-face {
            font-family: 'iconfont';
            src: url('//at.alicdn.com/t/font_1234567_abcdefghijk.eot');
            src: url('//at.alicdn.com/t/font_1234567_abcdefghijk.eot?#iefix') format('embedded-opentype'),
                url('//at.alicdn.com/t/font_1234567_abcdefghijk.woff2') format('woff2'),
                url('//at.alicdn.com/t/font_1234567_abcdefghijk.woff') format('woff'),
                url('//at.alicdn.com/t/font_1234567_abcdefghijk.ttf') format('truetype'),
                url('//at.alicdn.com/t/font_1234567_abcdefghijk.svg#iconfont') format('svg');
        }

        .icon {
            font-family: "iconfont" !important;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 左侧导航栏 -->
        <div class="sidebar">
            <div class="logo">用户中心</div>
            <ul class="nav-menu">
                <li class="nav-item active">
                    <i class="icon">&#xe6b8;</i>
                    <span>首页</span>
                </li>
                <li class="nav-item">
                    <i class="icon">&#xe6b9;</i>
                    <span>品牌笔记</span>
                </li>
                <li class="nav-item">
                    <i class="icon">&#xe6ba;</i>
                    <span>收藏</span>
                </li>
                <li class="nav-item">
                    <i class="icon">&#xe6bb;</i>
                    <span>售后</span>
                </li>
                <li class="nav-item">
                    <i class="icon">&#xe6bc;</i>
                    <span>订阅</span>
                </li>
                <li class="nav-item">
                    <i class="icon">&#xe6bd;</i>
                    <span>管理</span>
                </li>
            </ul>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 搜索栏 -->
            <div class="search-bar">
                <input type="text" class="search-input" placeholder="搜索内容...">
                <button class="search-btn">搜索</button>
            </div>

            <!-- 用户信息卡片 -->
            <div class="user-card">
                <div class="user-avatar">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="用户头像">
                </div>
                <div class="user-info">
                    <div class="user-name">张三</div>
                    <div class="user-stats">
                        <div class="stat-item">
                            <div class="stat-value">1.2k</div>
                            <div class="stat-label">粉丝</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">356</div>
                            <div class="stat-label">关注</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">128</div>
                            <div class="stat-label">收藏</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">56</div>
                            <div class="stat-label">闪存</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">12</div>
                            <div class="stat-label">小组</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">24</div>
                            <div class="stat-label">博问</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 用户发表内容 -->
            <div class="content-section">
                <h2 class="section-title">我的发表</h2>
                <div class="content-item">
                    <div class="content-title">如何高效学习前端开发</div>
                    <div class="content-meta">
                        <span>2023-06-15</span>
                        <span>阅读 1.2k</span>
                        <span>点赞 56</span>
                    </div>
                    <div class="content-text">
                        在这篇文章中，我将分享我学习前端开发的经验和技巧，包括如何制定学习计划、选择学习资源以及实践项目的方法...
                    </div>
                </div>
                <div class="content-item">
                    <div class="content-title">Vue3 新特性全面解析</div>
                    <div class="content-meta">
                        <span>2023-05-28</span>
                        <span>阅读 2.4k</span>
                        <span>点赞 128</span>
                    </div>
                    <div class="content-text">
                        Vue3带来了许多令人兴奋的新特性，如Composition API、性能优化等。本文将详细解析这些新特性及其使用场景...
                    </div>
                </div>
                <div class="content-item">
                    <div class="content-title">CSS Grid布局完全指南</div>
                    <div class="content-meta">
                        <span>2023-04-10</span>
                        <span>阅读 3.1k</span>
                        <span>点赞 89</span>
                    </div>
                    <div class="content-text">
                        CSS Grid是现代网页布局的强大工具，本文将带你从基础到高级全面掌握Grid布局的各种技巧和应用场景...
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧日历 -->
        <div class="right-sidebar">
            <div class="calendar">
                <div class="calendar-header">
                    <div class="calendar-title">2023年6月</div>
                    <div class="calendar-nav">
                        <button>&lt;</button>
                        <button>&gt;</button>
                    </div>
                </div>
                <div class="calendar-weekdays">
                    <div class="calendar-weekday">日</div>
                    <div class="calendar-weekday">一</div>
                    <div class="calendar-weekday">二</div>
                    <div class="calendar-weekday">三</div>
                    <div class="calendar-weekday">四</div>
                    <div class="calendar-weekday">五</div>
                    <div class="calendar-weekday">六</div>
                </div>
                <div class="calendar-days" id="calendarDays">
                    <!-- 日历日期将通过JavaScript动态生成 -->
                </div>
            </div>
        </div>
    </div>

    <script>
        // 生成日历
        function generateCalendar(year, month) {
            const calendarDays = document.getElementById('calendarDays');
            calendarDays.innerHTML = '';

            const firstDay = new Date(year, month, 1);
            const lastDay = new Date(year, month + 1, 0);
            const daysInMonth = lastDay.getDate();
            const startingDay = firstDay.getDay();

            // 上个月的最后几天
            const prevMonthLastDay = new Date(year, month, 0).getDate();
            for (let i = 0; i < startingDay; i++) {
                const dayElement = document.createElement('div');
                dayElement.className = 'calendar-day other-month';
                dayElement.textContent = prevMonthLastDay - startingDay + i + 1;
                calendarDays.appendChild(dayElement);
            }

            // 当前月的日期
            const today = new Date();
            for (let i = 1; i <= daysInMonth; i++) {
                const dayElement = document.createElement('div');
                dayElement.className = 'calendar-day';
                dayElement.textContent = i;

                if (year === today.getFullYear() && month === today.getMonth() && i === today.getDate()) {
                    dayElement.classList.add('today');
                }

                calendarDays.appendChild(dayElement);
            }

            // 下个月的前几天
            const daysToAdd = 42 - (startingDay + daysInMonth); // 6行x7天=42格
            for (let i = 1; i <= daysToAdd; i++) {
                const dayElement = document.createElement('div');
                dayElement.className = 'calendar-day other-month';
                dayElement.textContent = i;
                calendarDays.appendChild(dayElement);
            }
        }

        // 初始化日历
        const currentDate = new Date();
        generateCalendar(currentDate.getFullYear(), currentDate.getMonth());
    </script>
</body>
</html>